<template>
  <el-dialog :title="title" :visible="imgMark" append-to-body id="plan" @close="closeModal" :images="images" :markers="markers" fullscreen="true">
    <el-row class="el-dialog-div">
      <el-col style="width: 49%;margin-right: 5px">
        <div class="plan-img">
          <img class="bg" :src="bgSrc"/>
        </div>
      </el-col>
      <el-col style="width: 49%;margin-right: 5px">
        <div class="plan-img">
          <img class="bg" :src="bgSrc2" @click.stop="setPoint"/>
          <div v-for="(item, index) in markers"
               :key="index"
               class="block"
               :style="{ left: item.x + 'px', top: item.y + 'px', transform: 'translate(-50%, -100%)' }"
               @drag="dragenter($event, item)"
               draggable="true">
            <img :src="markSrc" class="mark-icon" @click.stop="editPoit(index,item)"/>
            <div class="button-group" v-if="item.showModal">
              <span @click="deletePoit(index)">删除点位</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitMark" class="button-minwidth" :loading="saveLoading">确定</el-button>
      <el-button @click="imgMark = false" class="button-minwidth">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import markSrc from '@/assets/mark.png'

export default {
  name: "AdjustDifference",
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    // 父组件传参弹窗标题
    title: {
      type: String,
      default: ""
    },
    images: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    },
    markers: {
      type: Array,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: []
    }
  },
  computed: {
    bgSrc() {
      return this.images[0];
    },
    bgSrc2() {
      return this.images[1];
    },
  },
  data() {
    return {
      //平面图标记点位
      imgMark: true,
      markSrc,
      saveLoading: false
    };
  },
  created() {
    window.addEventListener("resize", this.getImgRect)
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.getImgRect)
  },
  methods: {
    //绘制标记
    setPoint(e) {
      e = e || window.event;
      let x = e.offsetX || e.layerX;
      let y = e.offsetY || e.layerY;
      console.log(x,y)
      // let obj = {x: x + 'px', y: y + 'px', showModal: false}
      let obj = {x: x , y: y, showModal: false}
      // eslint-disable-next-line vue/no-mutating-props
      this.markers.push(obj);
      this.$forceUpdate();
    },
    //获取相对位置
    getImgRect() {
      setTimeout(() => {
          // 元素点是相对 背景图定位的    拖拽点获得的做标是相对屏幕的距离
          this.imgRect = document.querySelector(".plan-img .bg").getBoundingClientRect()
      }, 30);
    },
    //移动位置
    dragenter(e, item) {
      const {x, y} = this.imgRect
      if (e.clientX !== 0 && e.clientY !== 0) {
        item.x = `${e.clientX - x}px`
        item.y = `${e.clientY - y}px`
      }
    },
    //编辑标记
    editPoit(index, item) {
      if (item.showModal == false) {
        item.showModal = true
      } else {
        item.showModal = false
      }
      this.$forceUpdate();
    },
    //删除标记
    deletePoit(index) {
      // eslint-disable-next-line vue/no-mutating-props
      this.markers.splice(index, 1);
      this.$forceUpdate();
    },
    //提交标记
    submitMark() {
      this.$http
        .post('/illegal/submitMark', {images: this.images,points: this.markers})
        .then((res) => {
          this.saveLoading = false
          if (res.data.code === 0) {
            this.$message({ type: 'success', message: res.data.msg })
            this.$emit("update:visible", false);
            this.$emit("callback",res.data.data.url)
          } else {
            this.$message.error(res.data.msg)
          }
        })
        .catch((e) => {
          this.saveLoading = false
          this.$message.error(e.message)
        })
    },
    closeModal() {
      this.$emit("update:visible", false);
    },
  }
};
</script>

<style scoped>
#plan .el-dialog-div {
  height: 80vh;
  overflow: auto;
}

#plan .plan-img {
  width: 100%;
  height: 100%;
  overflow: auto;
  margin-bottom: 20px;
  position: relative;
}

#plan .plan-img .bg {
  position: relative;
  top: 0px;
  left: 0px;
}

#plan .plan-img .block {
  cursor: pointer;
  z-index: 29;
  position: absolute;
  display: flex;
  flex-direction: row;
  width: 24px;
  height: 30px;
}

#plan .plan-img .block .mark-icon {
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 30px;
  z-index: 30;
}

#plan .plan-img .block .button-group {
  position: absolute;
  left: 30px;
  top: 0px;
  display: flex;
  flex-direction: column;
  background: #0080ff;
  z-index: 40;
  width: 80px;
}

#plan .plan-img .block .button-group span {
  padding: 5px 15px 5px 10px;
  white-space: nowrap;
}

#plan .plan-img .block .button-group span:first-child {
  border-bottom: 1px solid #DCDFE6;
}

</style>

